<script setup lang="ts">
import type { Settings } from './types';

import { onMounted, ref } from 'vue';
import { $t } from '#/locales';
import { message, Skeleton } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { getSettingSite, putSettingSite } from '#/api/admin/setting';

import { defaultSettings, updateSettings } from './hook';

const loading = ref<boolean>(true);
const form = ref<Settings>(defaultSettings);
async function onSubmit(values: Record<string, any>) {
  const { msg } = await putSettingSite(updateSettings(form.value, values));
  message.success(msg);
}

const [Form, formApi] = useVbenForm({
  handleSubmit: onSubmit,
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
      },
      fieldName: 'site_name',
      label: $t("admin.Website Name"),
      rules: 'required',
    },
     {
      component: 'Upload',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
         tips:'Scale:304X85px,size:100k以内'
      },
      fieldName: 'site_logo_white',
      label: $t("admin.Website Logo"),
    },
      {
      component: 'Upload',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
         tips:'Scale:304X85px,size:100k以内'
      },
      fieldName: 'site_logo_black',
      label: $t("admin.Mobile Logo"),
    },
    {
      component: 'Upload',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
         tips:'64px*64px'
      },
      fieldName: 'favicon',
      label: 'favicon',
    },
    // {
    //   component: 'Input',
    //   componentProps: {
    //     placeholder: '请输入',
       
    //   },
    //   fieldName: 'site_icp',
    //   label: 'ICP备',
    // },
    // {
    //   component: 'Input',
    //   componentProps: {
    //     placeholder: '请输入',
    //   },
    //   fieldName: 'site_gwa',
    //   label: '公网安备',
    // },
    // {
    //   component: 'Input',
    //   componentProps: {
    //     placeholder: '请输入',
    //   },
    //   fieldName: 'site_admin_email',
    //   label: '站长邮箱',
    // },
    // {
    //   component: 'Textarea',
    //   componentProps: {
    //     placeholder: '请输入',
    //   },
    //   fieldName: 'site_analytics',
    //   label: '统计代码',
    // },
  ],
});

const onInfo = async () => {
  const { data } = await getSettingSite();
  if (data.site_info) {
    form.value.options = data.site_info;
    formApi.setValues(data.site_info);
  }
  if (data.cdn_settings) {
    form.value.cdn_settings = data.cdn_settings;
  }

  if (data.cmf_settings) {
    form.value.cmf_settings = data.cmf_settings;
  }
  loading.value = false;
};

onMounted(async () => {
  await onInfo();
});
</script>

<template>
  <Skeleton :loading="loading">
    <Form />
  </Skeleton>
</template>
